<template>
  <div>
    <el-row>
      <el-col :span="6" style="padding-right:.5em;border-right:2px solid #f4f4f4">
        <el-tree :data="eds" :props="defaultProps" @node-click="handleNodeClick" />
      </el-col>
      <el-col :span="18">
        <div v-if="params.device_id">
          <div>
            <h3 class="back el-icon-s-goods">工程信息</h3>
            <el-row>
              <el-col :span="12">
                <span class="label">工程编号：</span>
                <span class="value">{{ device.engineer.serial_number }}</span>
              </el-col>
              <el-col :span="12">
                <span class="label">工程名称：</span>
                <span class="value">{{ device.engineer.name }}</span>
              </el-col>
              <el-col :span="12">
                <span class="label">工程类型：</span>
                <span class="value">{{ device.engineer.type }}</span>
              </el-col>
              <el-col :span="12">
                <span class="label">工程状态：</span>
                <span class="value">{{ device.engineer.status }}</span>
              </el-col>
              <el-col :span="12">
                <span class="label">开始时间：</span>
                <span class="value">{{ device.engineer.begin_time }}</span>
              </el-col>
              <el-col :span="12">
                <span class="label">结束时间：</span>
                <span class="value">{{ device.engineer.end_time }}</span>
              </el-col>
              <el-col :span="12">
                <span class="label">地址：</span>
                <span class="value">{{ device.engineer.address }}</span>
              </el-col>
              <el-col :span="12">
                <span class="label">工程负责人：</span>
                <span class="value">{{ device.engineer.charge_id }}</span>
              </el-col>
            </el-row>
          </div>
          <div class="device">
            <h3 class="back el-icon-video-camera-solid">设备信息</h3>
            <el-row>
              <el-col :span="12">
                <span class="label">工程设备：</span>
                <span class="value">{{ device.serial_number }}</span>
              </el-col>
              <el-col :span="12">
                <span class="label">设备名称：</span>
                <span class="value">{{ device.name }}</span>
              </el-col>
              <el-col :span="12">
                <span class="label">绑定状态：
                  <el-tag
                    v-if="device.bind_status == 1"
                    size="mini"
                  >在线</el-tag>
                  <el-tag v-else type="danger" size="mini">离线</el-tag>
                </span>
              </el-col>
              <el-col :span="12">
                <span class="label">在线状态：
                  <el-tag
                    v-if="device.online_status == 1"
                    size="mini"
                  >在线</el-tag>
                  <el-tag v-else type="danger" size="mini">离线</el-tag>
                </span>
              </el-col>
            </el-row>
          </div>

        </div>
        <div v-else style="line-height:3em;color:red;text-align:center">请选择设备</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { get } from '@/utils/request'
export default {
  // 变量
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      eds: [],
      params: {},
      device: {}
    }
  },
  // 页面加载完毕后执行
  mounted() {
    this.loadEngineerDevices()
  },
  // 方法
  methods: {
    handleNodeClick(node) {
      if (node.engineer_id) {
        // 点击了设备
        this.$set(this.params, 'engineer_id', node.engineer_id)
        this.$set(this.params, 'device_id', node.id)
        // 设备信息参数重置
        const dparams = { id: node.id }
        // 请求设备信息
        get('/device/findDeviceDetail', dparams).then(resp => {
          this.device = resp.data
        })
      }
    },
    // 加载工程设备树
    loadEngineerDevices() {
      const url = '/engineer/findEngineerDeviceTree'
      get(url).then(resp => {
        this.eds = resp.data
      })
    }
  }
}
</script>
<style scoped>
  .label {
    height: 35px;
    font-size:medium;
    font-family: 黑体;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
  }
  .value {
    height: 35px;
    font-size:small;
    font-family: 楷体;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
  }
  .back {
    background-color: #f4f4f4;
    border-radius: 4px;
    width: 730px;
    height: 28px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
  }
</style>
